<template>
	<view class="">
		<view class="flg  text-lg response flex">
			<text @click="flg(1)" :class="[current == 1 ? 'black' : '']" class="flex-sub block flex  align-center justify-center">商品管理</text>
			<text @click="flg(2)" :class="[current == 2 ? 'black' : '']" class="flex-sub block  flex align-center justify-center">店铺资料</text>
		</view>
		<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box" v-if="current == 1">
			<view class="content padding">
				<u-swipe-action
					v-for="(item, index) in goodsInfo"
					:key="index"
					:index="index"
					:show="item.show"
					@click="click"
					@open="open"
					:options="options"
					btn-width="100"
				>
					<view class="list padding-left-lg  padding-tb-lg flex bg-white radius solid-bottom ">
						<view class="onAndOffShelves flex align-center justify-center" style="background-color: #f9cd3a;" v-if="item.online==0">
							<text class="cuIcon-notice margin-right-xs"></text>
							已上架
						</view>
						<view class="onAndOffShelves flex align-center justify-center" style="background-color: #CCCCCC;" v-else >
							<text class="cuIcon-notice margin-right-xs"></text>
							已下架
						</view>
						
						
						<image
							@click.stop="preview(item.image)"
							:src="item.image"
							mode="aspectFill"
							style="width: 160rpx; height: 160rpx;"
							class="bg-cyan radius "
						></image>
						<view class="flex flex-direction justify-between margin-left">
							<text class="text-black text-df text-cut  block" style="width: 60vw;">{{ item.denomination }}</text>
							<view class="flex">
								<block v-for="(item1, index1) in item.classification" :key="index1" class="">
									<!-- <text class="block text-sm margin-right flex align-center justify-center " style="background: #F5F3ED; padding: 5rpx 10rpx; line-height: 1;">
										家用
									</text> -->
									<view class="cu-tag radius " style="background:#F5F3ED ;">{{ item1 }}</view>
								</block>
							</view>
							<text class="text-price text-bold text-red">{{ item.price }}</text>
						</view>
					</view>
				</u-swipe-action>
			</view>
			<view class="add" @click="jump('/pages/user-center/addingGoods')"><text class="cuIcon-add"></text></view>

			<image
				v-if="!goodsInfo.length"
				src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/dataIsEmpty.png"
				mode="aspectFill"
				class="emptyIcon "
			></image>
		</scroll-view>
		<scroll-view scroll-y="true" enable-back-to-top class="scroll-box" v-if="current == 2">
			<view class="content padding">
				<view class="head padding shadow">
					<view class="info flex flex-direction justify-between" style="height: 122rpx;">
						<text>店铺名称</text>
						<view class="flex align-center  info_o response padding-lr">
							<input type="text" v-model="businessInfo.name" placeholder="请输入店铺名称" />
						</view>
					</view>
					<view class="info flex flex-direction justify-between" style="height: 122rpx;" @click="getAddress">
						<text>店铺地址</text>
						<view class="flex align-center  info_o response padding-lr">
							<input type="text" disabled v-model="businessInfo.address" placeholder="请选择地址" />
						</view>
					</view>
					<view class="info flex flex-direction justify-between" style="height: 122rpx;">
						<text>联系电话</text>
						<view class="flex align-center  info_o response padding-lr">
							<input type="number" v-model="businessInfo.contactNumber" placeholder="请输入联系电话" />
						</view>
					</view>

					<view class="info flex flex-direction justify-between" style="height: 122rpx;">
						<text>公告</text>
						<view class="flex align-center  info_o response padding-lr">
							<input type="text" v-model="businessInfo.announcement" placeholder="请输入公告" />
						</view>
					</view>

					<view class="info flex flex-direction justify-between" style="height: 122rpx;">
						<text>商家介绍</text>
						<view class="flex align-center  info_o response padding-lr">
							<input type="text" v-model="businessInfo.merchantService" placeholder="请输入商家介绍" />
						</view>
					</view>

					<view class="info flex flex-direction justify-between" style="height: 122rpx;">
						<text>营业时间</text>
						<view class="flex align-center  info_o response padding-lr">
							<input type="text" v-model="businessInfo.businessHours" placeholder="请输入营业时间" />
						</view>
					</view>
				</view>
				<view class="head padding shadow margin-top">
					<view class="info flex flex-direction justify-between">
						<text>店铺头像</text>
						<view class="sfz ">
							<view
								@click="ChooseImage('businessInfo.image')"
								style="position: relative; width: 300rpx;height: 200rpx;margin-right: 30rpx;background-color: #f1f1f1;"
							>
								<image :src="businessInfo.image" mode="aspectFill" v-if="businessInfo.image"></image>
								<view class="dianji" v-else><text class="cuIcon-add text-xl"></text></view>
							</view>
						</view>
					</view>
					<view class="info flex flex-direction justify-between">
						<text>法人身份证正反面</text>
						<view class="sfz ">
							<view
								@click="ChooseImage('businessInfo.idCardPositive')"
								style="position: relative; width: 300rpx;height: 200rpx;margin-right: 30rpx;background-color: #f1f1f1;"
							>
								<image v-if="businessInfo.idCardPositive" :src="businessInfo.idCardPositive" mode="aspectFill"></image>
								<view v-else class="dianji"><text class="cuIcon-add text-xl"></text></view>
							</view>
							<view
								@click="ChooseImage('businessInfo.idCardObverse')"
								style="position: relative; width: 300rpx;height: 200rpx;background-color: #f1f1f1;"
							>
								<image v-if="businessInfo.idCardObverse" :src="businessInfo.idCardObverse" mode="aspectFill"></image>
								<view v-else class="dianji"><text class="cuIcon-add text-xl"></text></view>
							</view>
						</view>
					</view>
					<view class="info flex flex-direction justify-between">
						<text>营业执照</text>
						<view class="sfz ">
							<view
								@click="ChooseImage('businessInfo.businessLicense')"
								style="position: relative; width: 300rpx;height: 200rpx;margin-right: 30rpx;background-color: #f1f1f1;"
							>
								<image v-if="businessInfo.businessLicense" :src="businessInfo.businessLicense" mode="aspectFill"></image>
								<view v-else class="dianji"><text class="cuIcon-add text-xl"></text></view>
							</view>
						</view>
					</view>
					<view class="info flex flex-direction justify-between">
						<text>背景图片</text>
						<view class="sfz ">
							<view
								@click="ChooseImage('businessInfo.backgroundPicture')"
								style="position: relative; width: 300rpx;height: 200rpx;margin-right: 30rpx;background-color: #f1f1f1;"
							>
								<image v-if="businessInfo.backgroundPicture" :src="businessInfo.backgroundPicture" mode="aspectFill"></image>
								<view v-else class="dianji"><text class="cuIcon-add text-xl"></text></view>
							</view>
						</view>
					</view>
				</view>
				<button class="cu-btn determine" @click="updateBusiness()">确认</button>
			</view>
		</scroll-view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
const app = getApp();
export default {
	data() {
		return {
			current: 1,
			businessInfo: {
				image: '',
				idCardPositive: '',
				idCardObverse: '',
				businessLicense: '',
				backgroundPicture: '',
				address: '',
				announcement: '',
				businessHours: '',
				contactNumber: '',
				iconFilter: null,
				merchantService: '',
				name: '',
				nameRemarks: '',
				ownerId: app.globalData.smmUser.id,
			},
			goodsInfo: [],
			options: [
				{
					text: '修改',
					style: {
						backgroundColor: '#f9cd3a',
					},
				},
				{
					text: '删除',
					style: {
						backgroundColor: '#dd524d',
					},
				},
				{
					text: '上下架',
					style: {
						backgroundColor: '#079875',
					},
				},
			],
			disabled: false,
			btnWidth: 180,
			show: false,
		};
	},
	onShow() {
		this.getLst();
	},
	methods: {
		async getLst() {
			var that = this;
			app.globalData.api.getBusinessByOwnerId(app.globalData.smmUser.id).then(res => {
				that.businessInfo = res.resultObj;
				app.globalData.businessInfo = res.resultObj;
				app.globalData.api.getGoodsByBussinessIdNoLimit(res.resultObj.id).then(res2 => {
					//将分类数据由字符串转为数组
					res2.resultObj.forEach(item => {
						item.classification = item.classification
							.replace(/"/g, '')
							.replace('[', '')
							.replace(']', '')
							.split(',');
					});
					that.goodsInfo = res2.resultObj;
				});
			});
		},

		//  更新上下架
		async modifyTheProduct(item) {
			console.log('item :>> ', item);
			
			app.globalData.api
				.putGoods({
					id:item.id,
					online: item.online ==0  ?  1  : 0,
				})
				.then(res => {
					console.log('res :>> ', res);
					if (res.code == 200) {
						this.$refs.uToast.show({ title: '修改成功上下架成功~~', type: 'success' });
						this.getLst();
					}
				});
		},
		async preview(urls) {
			uni.previewImage({
				urls: [urls],
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					},
				},
			});
		},

		click(index, index1) {
			console.log('index1 :>> ', index1);
			if (index1 == 1) {
				app.globalData.api.deleteGoods(this.goodsInfo[index].id).then(res => {
					this.$refs.uToast.show({ title: '删除商品成功~~', type: 'error' });
					this.getLst();
				});
			} else if (index1 == 0) {
				uni.navigateTo({
					url: 'addingGoods?id=' + this.goodsInfo[index].id,
				});
			} else {
				this.modifyTheProduct(this.goodsInfo[index]);
			}
		},
		open(index) {
			//console.log('index: ', index);
			// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
			// 原本为'false'，再次设置为'false'会无效
			this.goodsInfo[index].show = true;
			this.goodsInfo.map((val, idx) => {
				if (index != idx) this.goodsInfo[idx].show = false;
			});
			console.log('this.goodsInfo: ', this.goodsInfo);
		},
		async getAddress() {
			const [, { name, address, longitude, latitude }] = await uni.chooseLocation();
			this.businessInfo.address = address;
			console.log('address + name :>> ', address);
		},
		flg(e) {
			this.current = e;
		},
		jump(url) {
			uni.navigateTo({
				url,
			});
		},
		async loadMore() {
			this.$refs.uToast.show({ title: '加载更多', type: 'success' });
		},
		updateBusiness() {
			var that = this;
			app.globalData.api.updateBusiness(this.businessInfo).then(res => {
				if (res.resultObj > 0) {
					uni.showModal({
						title: '修改成功',
					}).then(() => {
						app.globalData.api.getBusinessByOwnerId(app.globalData.smmUser.id).then(res => {
							that.businessInfo = res.resultObj;
						});
					});
				}
			});
		},
		ChooseImage(str) {
			var that = this;

			wx.chooseImage({
				count: 3, //最多可以选择的图片总数
				sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success: function(res) {
					// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
					var tempFilePaths = res.tempFilePaths;
					that.imgList = res.tempFilePaths;
					wx.showToast({
						title: '正在上传...',
						icon: 'loading',
						mask: true,
						duration: 2000,
					});
					var uploadImgCount = 0;
					for (var i = 0, h = tempFilePaths.length; i < h; i++) {
						wx.uploadFile({
							url: 'https://tdg.qianjitianxia.com/upload/upload',
							filePath: tempFilePaths[0],
							name: 'uploadFile',
							header: {
								'Content-Type': 'multipart/form-data',
							},
							success: function(res) {
								uploadImgCount++;
								var data = JSON.parse(res.data);
								//如果是最后一张,则隐藏等待中
								if (uploadImgCount == tempFilePaths.length) {
									wx.hideToast();
								}
								if (data.link) {
									that.setData({
										[str]: data.link,
									});
								}
							},
							fail: function(res) {
								console.log(res);
								wx.hideToast();
								wx.showModal({
									title: '错误提示',
									content: '上传图片失败',
									showCancel: false,
									success: function(res) {},
								});
							},
						});
					}
				},
			});
		},
	},
};
</script>

<style lang="scss">
@keyframes test3 {
	from {
		box-shadow: 0rpx 0rpx 5rpx red;
	}

	to {
		box-shadow: 0rpx 0rpx 30rpx red;
	}
}

.add {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	right: 50rpx;
	bottom: 180rpx;
	width: 80rpx;
	height: 80rpx;
	background: #f8ce39;
	box-shadow: 0rpx 2rpx 11rpx 0rpx rgba(210, 164, 0, 0.53);
	opacity: 0.8;
	border-radius: 50%;
	color: #fffff2;
	font-size: 60rpx;
	animation: test3 2s ease-in-out infinite alternate;
}
.sfz {
	display: flex;
	margin-top: 20rpx;

	image {
		width: 300rpx;
		height: 200rpx;
		z-index: 999;
	}
}
.sfz image::first-child {
	margin-right: 30rpx;
}
.dianji {
	position: absolute;
	top: 70rpx;
	right: 34%;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	text {
		font-size: 60rpx !important;
		font-family: PingFang SC;
		color: #999 !important;
	}
}
.content {
	.list {
		position: relative;
		.onAndOffShelves{
			position: absolute;
			right: 0;
			top:10rpx;
			width: 120rpx;
			height: 40rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 26rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 33rpx 0rpx 0rpx 33rpx;
			
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #232323;
		}
	}
	.determine {
		width: 690rpx;
		height: 80rpx;
		background: #f8ce39;
		border-radius: 12rpx;

		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 80rpx;
		margin: 60rpx 0;
	}

	.head {
		width: 690rpx;

		background: #ffffff;
		border-radius: 20rpx;

		.personal {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
		
		input {
			width: 100%;
		}

		.info {
			margin-top: 30rpx;

			text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;

				&::after {
					content: '*';
					color: red;
					margin-left: 5rpx;
					font-size: 28rpx;
				}
			}

			.info_o {
				width: 630rpx;
				height: 70rpx;
				border: 1rpx solid #e6e6e6;
				border-radius: 6rpx;
			}
		}
	}
}
.flg {
	width: 750rpx;
	height: 90rpx;
	background: #f8ce39;
	color: #7f724b;
}
.scroll-box {
	width: 100vw;
	height: calc(100vh - 90rpx);
}
.black {
	font-weight: 600;
	color: #333333;
}
.content {
	width: 100vw;
	position: absolute;
	margin: 0 auto;

	.determine {
		width: 690rpx;
		height: 80rpx;
		background: #f8ce39;
		border-radius: 12rpx;

		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 80rpx;
		margin: 60rpx 0;
	}
	.head {
		width: 690rpx;

		background: #ffffff;
		border-radius: 20rpx;
		.personal {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
		input {
			width: 100%;
		}
		.info {
			margin-top: 30rpx;
			text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				&::after {
					content: '*';
					color: red;
					margin-left: 5rpx;
					font-size: 28rpx;
				}
			}
			.info_o {
				width: 630rpx;
				height: 70rpx;
				border: 1rpx solid #e6e6e6;
				border-radius: 6rpx;
			}
		}
	}
}
</style>
